<template>
  <div class>
    <div class="card ep-card ep-search" id="card" style="display:flex;justify-content: flex-end;">
      <!-- <div class="">tabs样式：</div> -->
      <el-radio-group v-model="tabPosition" size="mini" style="margin-right:20px;">
        <el-radio-button label="top">上</el-radio-button>
        <el-radio-button label="right">右</el-radio-button>
        <!-- <el-radio-button label="bottom">下</el-radio-button> -->
        <el-radio-button label="left">左</el-radio-button>
      </el-radio-group>
      <el-button type="primary" size="mini" @click="back">返回</el-button>
      <el-button
        type="success"
        size="mini"
        @click="submit"
        :disabled="dis"
      >{{tabparm.currtIndex==tabparm.componentRegisterList.length?"保存":"下一步"}}</el-button>
    </div>
    <el-tabs :tab-position="tabPosition" type="border-card" v-model="name">
      <el-tab-pane
        v-for="item in tabparm.componentRegisterList"
        :key="item.applicationOrder"
        :label="item.componentTitle"
        :disabled="item.applicationOrder>tabparm.currtIndex"
      >
        <component :type="type" v-bind:is="item.componentName" :registerId="item.id" :ref="item.componentName"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {paths} from "./js/importCom"
export default {
  components:paths,
  data() {
    return {
      dis:false,
      tabPosition: 'top',
      type: "",
      tabparm: {
        componentRegisterList: [],
        currtIndex: ""
      },
      name: "0",
      id: ""
    };
  },
  beforeCreate() {},
  computed: {},
  mounted() {
    this.type = this.$route.params.type;
    if (this.$route.params.type == "edit") {
      this.id = this.$route.params.id;
      this.init(this.id);
    }else{
      this.getId();
    }
  },
  beforeDestroy(){
    this.saveIndex()
  },
  methods: {
    back() {
      this.$router.push({ path: "/ent/entBaseList" });
    },
    saveIndex(){
      let params = {
        applicationPath:"@/pages/biz/ent/ent-tab.vue",
        operKey:this.id,
        currIndex:this.tabparm.currtIndex,
      }
      this.$api.formPost("/api/biz/components/componentOper/saveOrUpdateComponentOper",params)
      .then(res=>{
        // console.log(res)
      })
    },
    async submit() {
      this.dis = true
      try {
        this.id = await this.$refs[
          this.tabparm.componentRegisterList[this.name].componentName
        ][0].doSave(
          this.id ? this.id : "",
          "@/pages/biz/ent/ent-tab.vue",
          this.tabparm.componentRegisterList[this.name].componentName
        ).then(res=>{
          this.dis = false
          return res
        });
        if (this.tabparm.componentRegisterList.length - this.name / 1 == 1) {
          //最后一步
          this.back();
        }
        if (
          this.id &&
          this.name / 1 + 1 < this.tabparm.componentRegisterList.length
        ) {
          if (this.tabparm.currtIndex - this.name > 1) {
            this.name = this.name / 1 + 1 + "";
          } else {
            this.tabparm.currtIndex = this.tabparm.currtIndex / 1 + 1 + "";
            this.name = this.name / 1 + 1 + "";
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    getId() {
      this.$api.formPost("/api/biz/entBase/doGetId").then(res => {
        if (res.retHead.code == "0000000") {
          this.id = res.retBody;
          this.init(this.id);
        }
      });
    },
    init(id) {
      let params = {
        applicationPath: "@/pages/biz/ent/ent-tab.vue",
        componentKey: id
      };
      this.$api
        .formPost(
          "/api/biz/components/componentRegister/doGetComponentList",
          params
        )
        .then(res => {
          // console.log(res);
          if (res.retHead.code == "0000000") {
            this.tabparm = res.retBody;
            if (this.type == "edit") {
              let id = this.$route.params.id;
              this.name = this.tabparm.currtIndex-1+""
              this.getData(id);
            }
          }
        });
    },
    getData(id) {
      try {
        this.$nextTick(() => {
          for (let key in this.tabparm.componentRegisterList) {
            this.$refs[
              this.tabparm.componentRegisterList[key].componentName
            ][0].getData(id);
          }
        });
      } catch (error) {
        console.log(error);
      }
    }
  },
};
</script>
<style lang='scss' scoped>
</style>